<template>
	<div class="point">
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>积分管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--	搜索框	-->
		<div class="content">
			<div class="point-search">
				<el-form ref="form" :inline="true" :model="searchform" label-width="80px" size="medium">
					<el-form-item label="用户姓名">
						<el-input v-model="searchform.user_true_name"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchSubmit"><i class="el-icon-search"></i> 搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- 积分表格 -->
			<div class="point-table">
				<el-table :data="tableData" style="width: 100%" @selection-change="searchChange">
					<el-table-column prop="user_id" label="用户ID" sortable>
					</el-table-column>
					<el-table-column prop="user_true_name" label="真实姓名">
					</el-table-column>
					<el-table-column prop="user_name" label="用户名">
					</el-table-column>
					<el-table-column prop="user_kind" label="用户类别">
					</el-table-column>
					<el-table-column prop="sex" label="性别">
					</el-table-column>
					<el-table-column prop="telephone" label="电话">
					</el-table-column>
					<el-table-column prop="user_point" label="积分">
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页相关 -->
			<div class="point-page">
				<div class="block">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
					 :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import PointService from './PointService.js';
	export default {
		name: "point",
		data() {
			return {
				searchform: {
					user_true_name: '',
				},

				tableData: [],
				pageNum: 1,
				pageSize: 5,
				total: 50,
				adddialogVisible: false,
				editdialogVisible: false,
				
				delButton:true,
			}
		},
		created() {
			this.getPage(this.pageNum, this.pageSize);
		},
		methods: {
			//提交搜索表单
			searchSubmit() {
				this.getPage(this.pageNum, this.pageSize);
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getPage(this.pageNum, this.pageSize);
			},
			handleCurrentChange(val) {
				this.pageNum = val;
				this.getPage(this.pageNum, this.pageSize);
			},
			getPage(pageNum, pageSize) {
				PointService.searchbyuserinfoPageService(this.searchform, {
					pageNum: pageNum,
					pageSize: pageSize
				}, res => {
					console.log(res);
					this.tableData = res.searchResyltWithPage.list;
					this.total = res.searchResyltWithPage.total;
				})
			},
			//表格选择改变回调
			searchChange(select){
			  this.delButton = select.length == 0;
			},
		}
	}
</script>

<style scoped lang="less">
	
	@import '../../style/Common.less';
	
	.point {
	}
	
	.point-content{
	
	}

	.point-search {
		color: #606266;
		font-weight: bold;
	}

	.point-buttons {
		display: flex;

		.del-button-div,
		.point-state {
			margin: 0 12px 20px 12px;
		}

		.point-state {
			margin-left: auto;
		}
	}

	.point-table {}

	.point-page {
		height: 32px;
		margin: 20px 20px 0 0;
		float: right;
	}

	.point-add-dialog {
		.point-add {
			padding: 0 20px;
		}
	}
</style>


